<template>
  <!-- 雷达图 -->
  <div id="RadarChart">
    <div ref="chart01" class="chart01"></div>
  </div>
</template>

<script>
export default {
  name: "RadarChart",
  components: {},
  props: {
    xData: Array,
    yData: Array,
  },
  // props: ["xData","yData"],
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.drawRadarChart();
  },

  methods: {
    drawRadarChart() {
      let that = this;
      let mychart = that.$echarts.init(that.$refs.chart01);
      let option = {
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            let result01 = '';
            params.data.value.forEach(function (item,i) {
              result01 += that.xData[i].name + ' : ' + item + '</br>';
            });
            return result01;
          }
        },
        radar: [
          {
            indicator: that.xData,
            center: ["50%", "55%"],
            radius: ["0%", "80%"],
            //雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
            splitArea: {
              // show: false, // 是否隔行变色
              areaStyle: {
                color: ['rgba(255, 115, 114, .6)', 'rgba(245, 222, 90, .6)', 'rgba(113, 193, 132, .6)'] // 图表背景的颜色
              },
            },
            splitNumber: 3, //雷达图圈数
            name: {
              textStyle: {
                color: "#fff",
                fontSize: "12",
                backGroundColor: "red",
              },
            },
          },
        ],
        series: [
          {
            type: "radar",
            symbol: "circle",
            symbolSize: 0, // 拐点的大小
            tooltip: {
              trigger: "item",
            },
            lineStyle:{
              width: "0", //内容边框大小
            },
            itemStyle:{
              color: "#fd7f2c",  //内容边框颜色
              borderColor: "#fff",
              borderWidth: "2"
            },
            areaStyle:{
              color: "#04ACE1" //背景颜色
            },
            data: [
              {
                value: that.yData,
                name: "",
              },
            ],
          },
        ],
      };
      mychart.setOption(option);
      //   窗口自适应
      setTimeout(() => {
        let resizeFn = function () {
          mychart.resize();
        };
        window.addEventListener("resize", resizeFn);
        this.$once("hook:beforeDestroy", () => {
          mychart.dispose();
          mychart = null;
          window.removeEventListener("resize", resizeFn);
        });
      }, 200);
    },
  },
};
</script>
<style lang='less' scoped>
#RadarChart {
  width: 100%;
  height: 100%;
  // margin-top: 36px;
  .chart01 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    clear: both;
  }
}
</style>